<template>
    <video-player  class="video-player-box"
        ref="videoPlayer"
        :options="playerOptions"
        :playsinline="true"
        :x5-video-player-fullscreen="false"
        :x5-playsinline="playsinline"
        :x5-video-player-type="videoType"
        customEventName="customstatechangedeventname"
        @play="onPlayerPlay($event)"
        @pause="onPlayerPause($event)"
        @ended="onPlayerEnded($event)"
        @waiting="onPlayerWaiting($event)"
        @playing="onPlayerPlaying($event)"
        @loadeddata="onPlayerLoadeddata($event)"
        @timeupdate="onPlayerTimeupdate($event)"
        @canplay="onPlayerCanplay($event)"
        @canplaythrough="onPlayerCanplaythrough($event)"
        @statechanged="playerStateChanged($event)"
        @ready="playerReadied"
    >
    </video-player>
</template>

<script>
  // Similarly, you can also introduce the plugin resource pack you want to use within the component
  // import 'some-videojs-plugin'
  let fixedOptions = {
    muted: true,
    language: 'zh-CN',
    playbackRates: [0.7, 1.0, 1.5, 2.0],
    aspectRatio : '16:9',
    width: document.documentElement.clientWidth,
    fluid: true, // 当true时，Video.js player将拥有流体大小。换句话说，它将按比例缩放以适应其容器
    flash: {hls: {withCredentials: false}},
    html5: {hls: {withCredentials: false}},
    controlBar: { 
      'currentTimeDisplay': true,
      'timeDivider': true,
      'durationDisplay': true,
      'remainingTimeDisplay': true,
      'volumePanel': {
          inline: true
      }
    }
  };

  export default {
    props: {
      'videoConfig': {
        type: Object,
        default: {}
      }
    },
    data() {
      return {

      }
    },
    mounted() {
      console.log('this is current player instance object', this.player)
    },
    computed: {
      player(){
        return this.$refs.videoPlayer.player;
      },
      playerOptions(){
        let fixedConfigs = JSON.parse(JSON.stringify(fixedOptions));
        return {...{}, ...fixedConfigs, ...this.videoConfig}
      },
      playsinline(){
        var ua = navigator.userAgent.toLocaleLowerCase();
        //x5内核
        if (ua.match(/tencenttraveler/) != null || ua.match(/qqbrowse/) != null) {
          return false
        }else{
          //ios端
          return true				
        }
      },
      videoType(){
        var ua = navigator.userAgent.toLocaleLowerCase();
        if (ua.match(/tencenttraveler/) != null || ua.match(/qqbrowse/) != null) return "h5-page";
        return "h5";
      }
    },
    methods: {
      // listen event
      onPlayerPlay(player) {
        // console.log('player play!', player)
      },
      onPlayerPause(player) {
        // console.log('player pause!', player)
      },
      // ...player event

      // or listen state event
      playerStateChanged(playerCurrentState) {
        // console.log('player current update state', playerCurrentState)
      },

      // player is ready
      playerReadied(player) {
        console.log('the player is readied', player)
        // you can use it to do something...
        // player.[methods]
      },

      onPlayerPlaying(){},
      onPlayerTimeupdate(){},
      onPlayerCanplay(){},
      onPlayerCanplaythrough(){},
      onPlayerLoadeddata(){}
    }
  }
</script>

<style lang="scss" scoped>
.video-player-box {
    width: 100%;
    //height: 350px;

    .video-js, .vjs_video_3-dimensions {
        width: 100% !important;
        height: 100% !important;
    }

    .vjs-poster {
      background-size: cover;
    }
}
</style>